<template>
	<view class="apply-detail">
		<uv-form labelPosition="left" :labelStyle="{ color: '#767a82' }" labelWidth="80" :model="form">
			<uv-form-item label="发起人" borderBottom>
				<uv-input disabled v-model="form.nickName"></uv-input>
			</uv-form-item>
			<uv-form-item label="面试岗位" borderBottom>
				<uv-input disabled v-model="form.jobName"></uv-input>
			</uv-form-item>
			<uv-form-item label="面试日期" borderBottom>
				<uv-input disabled v-model="form.date"></uv-input>
			</uv-form-item>
			<uv-form-item label="面试时间" borderBottom>
				<uv-input disabled v-model="form.time"></uv-input>
			</uv-form-item>
			<uv-form-item label="面试地址" borderBottom>
				<uv-textarea v-model="form.address" autoHeight border="none"></uv-textarea>
			</uv-form-item>
		</uv-form>
		<view class="location">
			<map :latitude="latitude" :longitude="longitude" :markers="covers" style="width: 100%; height: 200px"></map>
		</view>
		<view class="confirm bottom">
			<button class="button refuse" :class="{ error: disabled }" :disabled="disabled" @click="handleRefuse">
				{{ form.status === 2 ? '已拒绝' : '拒绝' }}
			</button>
			<button class="button" :class="{ success: disabled }" :disabled="disabled" @click="handleAgree">
				{{ form.status === 3 ? '已同意' : '同意' }}
			</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { updateApplyStatus } from '@/apis/apply/apply.js';
const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
import socketManager from '@/utils/websocket.js';

export default {
	data() {
		return {
			latitude: null, // 纬度
			longitude: null, // 经度
			qqmapsdk: null,
			covers: [], // 标记点
			form: {
				jobName: '',
				date: '',
				time: '',
				address: '',
				nickName: ''
			}
		};
	},
	computed: {
		...mapState(['userInfo']),
		// 禁用按钮
		disabled() {
			if (this.form.status === 2 || this.form.status === 3) {
				return true;
			}
			return false;
		}
	},
	onLoad(option) {
		const info = JSON.parse(decodeURIComponent(option.info));
		if (info) {
			this.form = info;
			this.form.time = `${info.startTime} 至 ${info.endTime}`;
			this.form.date = uni.$uv.timeFormat(info.date);
		}

		this.qqmapsdk = new QQMapWX({
			key: 'H2RBZ-76OWD-BUO4P-PDBMT-TXUTS-PABLR'
		});

		// 获取经纬度
		this.qqmapsdk.geocoder({
			address: this.form.address,
			success: res => {
				this.latitude = res.result.location.lat;
				this.longitude = res.result.location.lng;
				this.covers.push({
					id: 1,
					width: 30,
					height: 30,
					latitude: this.latitude,
					longitude: this.longitude
				});
			},
			fail: err => {
				console.log(err);
			}
		});
	},
	methods: {
		// 拒绝面试
		async handleRefuse() {
			const socket = socketManager.getSocket();
			const res = await updateApplyStatus({ type: 'one', id: this.form.id, status: 2 });

			if (res.code === 200) {
				this.form.status = 2;
				uni.showToast({ icon: 'success', title: '确认成功' });
				socket.emit('notice', {
					createdAt: new Date(),
					status: 0,
					content: this.userInfo.nickname + '拒绝了您的面试预约',
					userId: this.form.userId,
					friendId: this.form.friendId
				});
			}
		},
		// 同意面试
		async handleAgree() {
			const socket = socketManager.getSocket();
			const res = await updateApplyStatus({ type: 'one', id: this.form.id, status: 3 });

			if (res.code === 200) {
				this.form.status = 3;
				uni.showToast({ icon: 'success', title: '确认成功' });
				socket.emit('notice', {
					createdAt: new Date(),
					status: 0,
					content: this.userInfo.nickname + '同意了您的面试预约',
					userId: this.form.userId,
					friendId: this.form.friendId
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.apply-detail {
	padding: 0 30rpx;
	.confirm .button {
		margin: 0 20rpx;
	}
	.refuse {
		background-color: #f56c6c;
	}
	.error {
		color: #fff;
		opacity: 0.5;
		background-color: #f56c6c !important;
	}
	.success {
		color: #fff;
		opacity: 0.5;
		background-color: #12ae85 !important;
	}
}
</style>
